<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="UTF-8">
	<title>Main</title
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="../../webapp/images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .nav-ele{
            background-color: #eee;
            border-radius:5px;
            height: 120px;
            font-size: 16px;
            padding: 10px 5px 0 5px;
            text-align: center;
        }
        .nav-ele:hover{
            box-shadow:0 0 10px #666;
            color: #999;
        }
        a{
            display: block;
            text-decoration: none;
            color: #333;
        }
        a:hover{
            color: #999;
        }
        .row-fluid{
            margin-top: 15px;
        }
        .row-fluid .span3{
            margin-left: 15px;
            position: relative;
        }
        .row-fluid [class*="span"]:first-child{
            margin-left: 10px;
        }
        .tool-bar{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 98%;
            background-color: #34495e;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 28px;
            text-align: right;
            padding-right: 5px;
            font-size: 16px;
        }
        .tool-bar a{
            margin-left: 5px;
            display: inline;
            color: #ddd;
        }
        .tool-bar a:hover{
            color:#1abc9c;
        }
    </style>
    <script type="text/javascript">
        var editId = 0;
        function del(id){
            if(confirm("Are U Sure?")){
                $.get("nav/del.do?id="+id,function(){
                    location.reload();
                });
            }
        }
        function edit(id,href,title){
            editId = id;
            $("#new-link-title").val(title);
            $("#new-link-href").val(href);

        }

        $(function(){
            $("a[href='myModal']").click(function(){
               editId = 0;
            });
           $("#new-link-href").focusin(function(){
               if($(this).val() == ""){
                   $(this).val("http://");
               }
           }).focusout(function(){
               if($(this).val() == "http://"){
                   $(this).val("");
               }
           });

           $("#new-link-add").click(function(){
              var data = {};
               data.title = $("#new-link-title").val();
               data.href = $("#new-link-href").val();
               if(data.title == ""){
                   alert("请填写名称");
                   $("#new-link-title").focus();
               } else if(data.href=="" ||data.href=="http://"){
                   alert("请填写正确的网址");
                   $("new-link-href").focus();
               }else{
                   if(editId == 0){
                       $.post("nav/new.do",data,function(){
                           location.reload();
                       });
                   }else{
                       data.id = editId;
                       $.post("nav/mod.do",data,function(){
                           location.reload();
                       });
                   }

               }
           });
        });
    </script>

</head>
<body>
    <#list links as row>
	<div class="row-fluid">
        <#list row as link>
		<div class="span3 ">
            <#if link.href == "#addlink">
                <a data-toggle="modal" href="#myModal"><div class="nav-ele"><div style="margin-bottom:25px;">${link.title}</div><span class="fui-plus-24"></span></div></a>
            <#else >
			<a  href="${link.href}" target="_blank"><div class="nav-ele">${link.title}</div></a>
			<div class="tool-bar">
				<a data-toggle="modal" href="#myModal" onclick="javascript:edit('${link.id}','${link.href}','${link.title}')"><span class="fui-new-16"></span></a>
				<a  href="#del"  onclick="javascript:del(${link.id})"><span class="fui-cross-16"></span></a>
			</div>
            </#if>
		</div>
        </#list>
	</div>
    </#list>
    <div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>Add New Link</h3>
    </div>
    <div class="modal-body">
        <input type="text" id="new-link-title" name="ltitle" placeholder="Link Title" style="width:96%">
        <input type="text" id="new-link-href" name="lhref" placeholder="Link Address" style="width:96%">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Give Up</a>
        <a href="#" id="new-link-add" class="btn btn-primary">Save</a>
    </div>
</div>
</body>
</html>